<template>
    <div class="el-pick-custom-div">
        <el-date-picker v-model="values" type="daterange" align="right" unlink-panels range-separator="至"
            start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="defaultPickerOptions"
            @change="handleChange" :size="size">
        </el-date-picker>
    </div>
</template>
<script>
export default {
    data() {
        return {
            values: []
        }
    },
    computed: {
        defaultPickerOptions() {
            if (this.pickerOptions)
                return this.pickerOptions;

            return {
                shortcuts: [{
                    text: '最近一周',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                        picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近一个月',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                        picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近三个月',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                        picker.$emit('pick', [start, end]);
                    }
                }]
            }
        }
    },
    methods: {
        handleChange(values) {
            this.$emit("change", values);
        }
    },
    mounted() {

    },
    props: {
        pickerOptions: {
            type: Object,
            default: () => null
        },
        size: {
            type: String
        }
    }
}
</script>
<style scoped>
.el-pick-custom-div{
    width: 350px;
    display: inline-block;
}
</style>